<script setup>
import { ref } from 'vue'
import {formatDate} from '@/utils'
import { reqClientList } from '@/api'
import { toRaw } from '@vue/reactivity'
import { Search } from '@element-plus/icons-vue'
const dateTypeList = [
  {
  'name':'已送达'
},
  {
  'name':'发送失败'
},
]
const searchVal = ref('')
const searchStaff = ()=>{
  console.log('搜索客户')
}
const tableData = ref()
const pageNo = ref(1)
const queryForm = ref({
	qrId: ''
})
const isRefresh = ref(true)
const handleRefresh = () => {
  isRefresh.value = false
  isRefresh.value = true
}
const getData = async(obj)=>{
	let queryForm = {
		page:pageNo.value,
		size:10
	}
	if(obj) {
		queryForm.page = 1
		queryForm = Object.assign(queryForm,toRaw(obj))
	}
	const r = await reqClientList(queryForm)
	if (r){
		tableData.value = r.data.item
	}
	
}
getData()
const emits = defineEmits(['showDetail'])


</script>
<template>
	<div>
			<div class="app-edit app-gap-block-top">
      
		
			<div class="app-edit-body">
        <div class="">
          <span class="app-words-2 app-flex-left"
					>共有{{ total }}条群发内容<span class="weak-grey-font app-gap-words-left">|</span>
					<div @click="getData"> 
						<div style="height: 4px"></div>
						<MyIcon class="app-pointer app-gap-words-left weak-grey-font" name="Fresh" />
					</div>
					<span class="app-words-2 weak-grey-font app-gap-words-left">更新数据</span>
					<span class="app-words-2 weak-grey-font app-gap-words-left">更新于：2022-10-21 22:47</span>
        </span>
        <div class="app-flex-2 app-gap-block-top">
          <div class="app-flex-left">
          <span class="app-select-right">搜索客户：</span>
          	<el-input
											v-model="searchVal"
											class="inp-w-200"
											size="large"
											@input="searchStaff"
											placeholder="请输入名称"
											clearable
											suffix-icon="Search"
										/>
          <span class="app-select-right app-gap-words-left">送达状态：</span>
          <el-select v-model="queryForm.dateType" class="m-2" placeholder="请选择" size="large">
						<el-option v-for="(item, index) in dateTypeList" :key="index" :label="item.name" :value="item.name" />
          </el-select>
          </div>
        </div>
        

					<el-table
				class="app-container-radius a-mt20"
				ref="multipleTableRef"
				:data="tableData"
				style="width: 100%"
				:header-cell-style="{ color: '#909399', fontSize: '14px', backgroundColor: '#F7F9FA', padding: '10px 0' }"
				:cell-style="{ fontSize: '14px', padding: '20px 0' }"
      >
      <el-table-column label="客户名称" align="left">
          <template #default="scope">
						<div class="app-flex-left">
							<el-avatar class="cho-margin" shape="square" :size="30" :src="scope.row.staff_avatar" />
							<span class="app-gap-words-left">
								{{ scope.row.staff_name}}
							</span>
						</div>
          </template>
          </el-table-column>
				
				<el-table-column label="发送员工" align="left">
					<template #default="scope">
						<div class="app-words-box">
								<div class="app-flex-left">
									<MyIcon class="app-down-icon primary-font" name="Person" />
									<span class="app-gap-words-left-xs">{{ scope.row.name}}</span>
								</div>
							</div>
					</template>
        </el-table-column>
        <el-table-column label="消息送达状态" align="left">
					<template #default="scope">
						<div class="app-flex-left">
							<span class="">
								已送达
							</span>
						</div>
					</template>
				</el-table-column>
			
				<el-table-column label="发送时间" prop="createTime" align="left"> 
				<template #default="scope">
				{{formatDate(scope.row.createtime, 'yyyy-MM-dd hh:mm:ss')}}
				</template>
				

				</el-table-column>
				<el-table-column label="操作" align="right">
					<template #default="scope">
						<span class="app-primary-font app-pointer" @click="emits('showDetail',scope.row.id)">客户详情</span>
					</template>
				</el-table-column>
			</el-table>
      </div>
      </div>
		</div>
	</div>
</template>
<style lang="scss">
@import url('../../../../../style/app-component.scss');
@import '../../../../../style/mixin.scss';
.el-page-header {
  display:none;
}
</style>
